<template>
    <!--<van-loading type="spinner" color="black" />-->
  <div class="school">

    <!--头部样式-->
    <NavBar>
      <van-icon slot="left" name="wap-home-o" @click="goIndex"/>
      <div slot="title" class="van-nav-bar__title van-ellipsis">首页</div>
      <div slot="right" class="van-nav-bar__text" @click="onClickRight">
        <img class="handImg" :src="handImg">
        <span class="van-nav-bar__text van-ellipsis" style="max-width: 50px;">{{nickname}}</span>
      </div>
    </NavBar>

    <!--搜索-->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @click="onSearch"
    >
    </van-search>

    <!--轮播图-->
    <div class="swipe-block">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index" @click="swipeClick(image.swiperId)">
          <img v-lazy="IMG_SERVICE_ADDR + image.swiperUrl" style="width: 100%;height: 200px;" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="choose_type">
      <div class="type" @click="typeSearch(1)">
        <div>
          <img class="type_img" src="../../assets/img/yifu.png" />
        </div>
        <div>
          <span>冬季校服</span>
        </div>
      </div>
      <div class="type" @click="typeSearch(2)">
        <div>
          <img class="type_img" src="../../assets/img/yifu.png" />
        </div>
        <div>
          <span>冬季校服</span>
        </div>
      </div>
      <div class="type" @click="typeSearch(3)">
        <div>
          <img class="type_img" src="../../assets/img/yifu.png" />
        </div>
        <div>
          <span>冬季校服</span>
        </div>
      </div>
      <div class="type" @click="typeSearch(4)">
        <div>
          <img class="type_img" src="../../assets/img/yifu.png" />
        </div>
        <div>
          <span>冬季校服</span>
        </div>
      </div>
    </div>

    <div>
      <div class="product"><span style="color: darkgrey">一</span> <span>布料展示</span> <span style="color: darkgrey">一</span></div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
          <span style="width: 100px;" class="van-ellipsis">秋装</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
          <span style="width: 100px;" class="van-ellipsis">秋装秋装秋装秋装秋装秋装秋装</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          <span style="width: 100px;" class="van-ellipsis">秋装</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
          <span style="width: 100px;" class="van-ellipsis">秋装</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
          <span style="width: 100px;" class="van-ellipsis">秋装</span>
        </van-grid-item>
      </van-grid>
    </div>

  </div>

</template>
<!--<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>-->
<script>
import NavBar from '@/components/navbar'
import https from '@/common/https.js'
import {IMG_SERVICE_ADDR, SERVICE_ADDR} from '@/config/configConstant.js' // 常量参数
import commonjs from '@/common/commonUtils.js'
import headImg from '../../assets/img/hand.png'
export default {
  name: 'index',
  components: { NavBar },
  data () {
    return {
      value: '',
      IMG_SERVICE_ADDR: IMG_SERVICE_ADDR,
      images: [
        // {
        //   'swiperId': 4,
        //   'swiperUrl': 'https://img.yzcdn.cn/vant/apple-2.jpg'
        // },
        // {
        //   'swiperId': 3,
        //   'swiperUrl': 'https://img.yzcdn.cn/vant/apple-2.jpg'
        // }
      ],
      handImg: headImg,
      nickname: '昵称'
    }
  },
  activated () {
    console.log('-----index activated-----')
  },
  created () {
    console.log('-----index created-----')
    let isWchat = commonjs.is_wexin()
    if (isWchat) {
      let wechat = commonjs.getStorage('wechat')
      if (wechat !== null) { // 判断是否微信授权登录
        wechat = JSON.parse(wechat)
        console.log('wechat:' + Object.values(wechat))
        let openid = wechat.openId
        this.handImg = wechat.wechatImgUrl
        this.nickname = wechat.wechatName
        if (openid === null || openid === '' || openid === undefined) {
          window.location.href = SERVICE_ADDR + '/wechat/webs/login'
        }
      } else {
        console.log('wechat getStorage is null -------')
        window.location.href = SERVICE_ADDR + '/wechat/webs/login'
      }
    }
  },
  mounted () { // created和mounted里面都可以做数据处理，唯一不同的是created dom未完成挂载(一般数据加载)，mounted已经完成了挂载(业务逻辑处理)。
    this.getSwiperData()
  },
  methods: {
    onClickRight () {
      let wechat = JSON.parse(commonjs.getStorage('wechat'))
      let openid = wechat.openId
      if (openid !== null && openid !== '') {
        this.$toast(openid)
      } else {
        this.$toast('按钮')
      }
    },
    swipeClick (swiperId) {
      this.$router.push({
        path: '/swipeDetail',
        query: {
          swiperId: swiperId
        }
      })
    },
    goIndex () {
      this.$router.push('/')
    },
    onSearch () {
      this.$router.push('./search')
    },
    typeSearch (t) {
      this.$toast('跳转' + t)
    },
    getSwiperData () { // http获取轮播图数据
      let params = {}
      https.fetchPost('/swiper/webs/findSwiperLists', params).then((data) => {
        // console.log('data:' + data.data[0].swiperUrl)
        let swiper = data.data
        if (swiper !== null) {
          this.images = swiper
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
  .van-nav-bar__title {
    font-weight: bold;
    font-size: 20px;
  }
  .van-search {
    margin-top: 46px;
    padding: 5px 5px;
  }
  .van-nav-bar__text:active {
    background-color: #eff7fa;
  }
  .handImg {
    width: 30px;
    position: relative;
    top: 8px;
    border-radius: 50%;
  }
  .product {
    font-size: 16px;
    line-height: 50px;
    background: #fff;
    margin-top: 5px;
    margin-bottom: 1px;
  }
  .van-grid-item {
    border: 1px solid #f3f3f3;
  }
  .choose_type {
    width: 100%;
    height: 100px;
    margin-top: 1px;
    background-color: #fff;
  }
  .type {
    margin-top: 5%;
    width: 25%;
    float: left;
  }
  .type_img {
    width: 40%;
  }
  .school {
    padding-bottom: 50px;
  }
</style>
